﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <script src="lib/jquery-1.9.1.js"></script>
    <style>
        .circle {
            border-radius: 50%;
            background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #48c1e9 0%, blue 100%, green 5%);
            background-image: -webkit-radial-gradient(45px 45px, circle cover, #48c1e9, blue);
            background-image: radial-gradient(45px 45px 45deg, circle cover, #48c1e9 0%, blue 100%, green 5%);
            border: 1px solid green;
            -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
            box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
        }

        .circle > div {
            margin-top: 40%;
            text-align: center;
            color: #fff;
            font-weight:200;
        }
    </style>
    <script>
        $(document).ready(function () {

        });
    </script>
</head>
<body>
    <div style="height: 500px; width: 500px;">

    </div>
    <div style="height: 100px; width: 100px" class="circle">
        <div>Test</div>
    </div>
</body>
</html>
